<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
    <Transfer
      v-model:target-keys="targetKeys"
      :data-source="mockData"
      show-search
      :titles="[' · 候选的域', ' · 已选的域']"
      :filter-option="filterOption"
      :render="(item) => item.title"
      :list-style="{
        width: '500px',
        height: '500px',
      }"
      @change="handleChange"
      @search="handleSearch"
    />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Transfer } from 'ant-design-vue';
  import { getFormGetFields } from '/@/api/flowManage/flowManage';
  import { useMessage } from '/@/hooks/web/useMessage';

  interface MockData {
    key: string;
    title: string;
    description: string;
    chosen: boolean;
  }

  export default defineComponent({
    name: 'SelectFormDomainModal',
    components: { BasicModal, Transfer },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const isUpdate = ref(true);
      let dataRef: any = ref({});
      const type = ref('');
      const { createMessage } = useMessage();

      let mockData = ref<MockData[]>([]);

      let targetKeys = ref<string[]>([]);
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        setModalProps({ confirmLoading: false, width: '50%' });
        type.value = data.type;
        isUpdate.value = !!data?.isUpdate;
        dataRef.value = data;
        // mockData.value = dataRef.mockData || [];
        targetKeys.value = dataRef.value.fields || [];
        getDataList();
      });

      const getTitle = '流程表单域设定';

      async function handleSubmit() {
        try {
          setModalProps({ confirmLoading: true });
          // TODO custom api
          if (targetKeys.value.length == 0) {
            createMessage.warning('选择数据不能为空');
            return;
          }
          const selectedList: Recordable[] = mockData.value.filter((item: any) =>
            targetKeys.value.includes(item.name),
          );
          let fieldWrites: String[] = [];
          let fieldWriteTexts: String[] = [];
          selectedList.forEach((item) => {
            fieldWrites.push(item.key);
            fieldWriteTexts.push(item.title);
          });
          let params = {
            fields: fieldWrites.join(','),
            fieldTexts: fieldWriteTexts.join(','),
            type: type.value,
          };

          closeModal();
          emit('success', params);
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }

      const getDataList = async () => {
        let params = {
          formCode: dataRef.value.formCode,
        };
        await getFormGetFields(params).then((res) => {
          let data = res || [];
          data.forEach((item) => {
            item.key = item.name;
            item.description = item.title;
          });
          mockData.value = data;
        });
      };

      const filterOption = (inputValue: string, option: MockData) => {
        return option.description.indexOf(inputValue) > -1;
      };
      const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {};

      const handleSearch = (dir: string, value: string) => {};

      return {
        registerModal,
        getTitle,
        handleSubmit,
        mockData,
        targetKeys,
        filterOption,
        handleChange,
        handleSearch,
      };
    },
  });
</script>
